<template>
 <view class="threestage"  @touchmove.stop.prevent="moveHandle">
    <scroll-view :class="['left',showHeader == false?'left_h5':'left_app']" scroll-y scroll-with-animation :scroll-top="scrollTop" @scrolltoupper="ontop">
      <view v-for="(item, index) in classList" :key="index" :class="'classTitle ' + (current == index ? 'actives':'')" @tap="setCurrent(item,index)" :style="{color:current == index ?colors:''}">
        <text>{{item.name}}</text>
        <view class="classactive" v-if="current == index" :style="'background-color:' + colors">
        </view>
      </view>
    </scroll-view>
    <scroll-view :class="['right',showHeader == false?'right_h5':'right_app']" scroll-y scroll-with-animation>
      <block v-if="classData.length !== 0">
        <view class="top_img">
        <!-- <image src="https://img.zcool.cn/community/01e47655efeee832f875a132e43a9c.png@1280w_1l_2o_100sh.png" lazy-load="true" mode="widthFix"></image> -->
      </view>
      <view class="class_box">
        <view v-for="(item, index) in classListsub" :key="index" class="box_list" @tap="jumpClassList(item)">
          <image :src="item.cover" mode="widthFix"></image>
          <view class="list_name">{{item.name}}</view>
        </view>
      </view>
      <view class="nodata">—— 到底啦 ——</view>
      </block>
      <view class="zanwu" v-if="classData.length == 0">
        <text class="iconfont icon-none" style="font-size: 32upx"></text>
        <text style="font-size: 24upx">暂无数据</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      scrollTop: 0,
	  classListsub:[]
	  
    };
  },

  components: {},
  props: {
    colors: {
      type: String
    },
	classList:{
		type:Array
	},
	classData:{
		type:Array
	},
	current: {
		type:Number,
		default: 0
	},
	showHeader: { //用来控制在APP下样式
		type:Boolean,
		default: false
	}
  },
  created(){
	 this.classListsub=this.classList[0].sub;
  },
  methods: {
	moveHandle(){},
    setCurrent(item,index) {
	 let scrollTop = index * 20;
	 if (index <= 2) {
		  scrollTop = 0;
	  }
      this.setData({
        current: index,
		scrollTop: scrollTop
      });
	  this.classListsub=this.classList[index].sub;
	  this.$emit('setThere',item)
    },
	jumpClassList(item){
		// console.log(item)
		uni.navigateTo({
			url:'/pages/views/home/classList?cateid='+item.id
		})
	}
  }
};
</script>
<style scoped lang="scss">
@import "./threestage.scss";
</style>